
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
    <div class="top">
        <div class="t_header">
	        <div class="t_nav">
                <a href="#">小米网</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">米聊</a>
                <span>|</span>
                <a href="#">游戏</a>
                <span>|</span>
                <a href="#">多看阅读</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">小米网移动版</a>
                <span>|</span>
                <a href="#">Select region</a>
                <span>|</span>
                <a href="#">米粉节答疑</a>
		    </div>
		    <div class="t_inf">
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">登录</a>
		    </div>
	    </div>
    </div>

    <div class="nav">
        <div class="n_logo">
		    <img src="images/logo.png" alt="">
	    </div>
	    <div class="n_search">
	        <div class="n_text">
				<input type="text" class="n_txt" placeholder="搜索您需要的商品"/><input type="submit" class="n_sub" value="">
				<button></button>
			    <div class="n_words">
			        <a href="#">小米手环</a>
				    <a href="#">耳机音响</a>
				    <a href="#">保护壳</a>
			    </div>
		    </div>
		    <div class="n_car">
		        <a href="#"><img src="images/shopcar.png" alt="">购物车</a>
		    </div>
	    </div>
	    <div class="n_time">
            <img src="images/clock.png" alt="">
	        <li>4月14日开放购买</li>
	    </div>
	    <div style="clear:both"></div>

	    <div class="n_all">
	        <ul>
		        <li><a href="#" class="all">全部商品分类</a></li>
			    <li><a href="#">首页</a></li>
			    <li><a href="#">小米手机</a></li>
			    <li><a href="#">红米</a></li>
			    <li><a href="#">小米平板</a></li>
			    <li><a href="#">小米电视</a></li>
			    <li><a href="#">盒子</a></li>
			    <li><a href="#">路由器</a></li>
			    <li><a href="#">合约机</a></li>
			    <li><a href="#">服务</a></li>
			    <li><a href="#">社区</a></li>
		    </ul>
	    </div>
    </div>

    <div class="content">
        <div class="c_menu">
	        <dl>
		        <dt>购买手机</dt>
			    <dd>
                    <a href="#">小米Note</a>
                    <a href="#">小米4</a>
                    <a href="#">红米</a>
                    <a href="#">红米Note</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>购买电视与平板</dt>
			    <dd>
                    <a href="#">小米电视</a>
                    <a href="#">小米盒子</a>
                    <a href="#">小米平板</a>
                </dd>
	        </dl>
		    <dl>
		        <dt>路由器与智能硬件</dt>
                <dd>
                    <a href="#">路由器</a>
                    <a href="#">体重秤</a>
                    <a href="#">净化器与滤芯</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>插线板、移动电源与电池</dt>
			    <dd>
                    <a href="#">小米移动电源</a>
                    <a href="#">电池</a>
                    <a href="#">充电器</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>耳机音响与存储卡</dt>
			    <dd>
                    <a href="#">小米头戴式耳机</a>
                    <a href="#">小米活塞耳机</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>保护套与贴膜</dt>
		 	    <dd>
                    <a href="#">保护套/保护壳</a>
                    <a href="#">贴膜</a>
                    <a href="#">防尘塞</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>后盖个性化配件</dt>
			    <dd>
                    <a href="#">米键</a>
                    <a href="#">后盖</a>
                    <a href="#">贴纸</a>
                    <a href="#">手机支架</a>
                </dd>
		    </dl>
		    <dl>
		        <dt>小米生活方式</dt>
			    <dd>
                    <a href="#">服装</a>
                    <a href="#">米兔</a>
                    <a href="#">背包</a>
                    <a href="#">生活周边</a>
                </dd>
		    </dl>
	    </div>
	    <div class="c_banner">
            <div class="c_pic">
                <div id="list">
                    <img src="images/banner5.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner1.png" alt="">
                </div>
                <button id="prev"></button>
                <button id="next"></button>
                <div id="btns">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <script>
                $(function () {
                    var index = 0;
                    // 1.点击next
                    $("#next").click(function () {
                        index++;
                        if (index > 4) {
                            index = 0;
                        }
                        animate(index);
                    })
                    // 2.点击prev
                    $("#prev").click(function () {
                        index--;
                        console.log(index);
                        if (index < 0) {
                            index = 4;
                        }
                        animate(index);
                    })
                    // 3.焦点随左右按钮变化
                    function animate(index) {
                        $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
                        $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                    }
                    // 4.点击按钮,让对应的图片出现
                    $("#btns span").click(function(){
                        $(this).addClass("current").siblings().removeClass("current");
                        index = $(this).index();
                        $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
                        
                    })
                })
            </script>
		    <div class="c_b">
		        <a href="#"><img src="images/01.png" alt=""></a>
		        <a href="#"><img src="images/02.png" alt=""></a>
		        <a href="#"><img src="images/03.png" alt=""></a>
		    </div>
	    </div>
    </div>
   
    <div class="star">
        <div class="s_title">
            <h2>小米明星单品</h2>
		    <a href="#" class="s_desc">根据机型选配件</a>
		    <div class="s_more">
		        <a href="#" class="s_pre"><img src="images/05.png" alt=""></a>
		    	<a href="#" class="s_next"><img src="images/06.png" alt=""></a>
			</div>
		    <div style="clear:both;"></div>
	    </div>
	    <div class="s_goods">
	        <div class="s_list l1">
		        <div class="s_con">
			        <a href="#">
			        <img class="s_pic" src="images/a1.jpg" alt="">
			        </a>
			        <a href="#" class="s_title">小米智能插座</a>
			        <p>让普通家电变得智能</p>
			    </div>
		    </div>
		    <div class="s_list">
		        <div class="s_con">
			        <a href="#">
			        <img class="s_pic" src="images/a2.jpg" alt="">
			        </a>
			        <a href="#" class="s_title">小米空气净化器</a>
			        <p>高性能智能空气净化器立即预约</p>
			    </div>
		    </div>
		    <div class="s_list">
		        <div class="s_con">
			        <a href="#">
			        <img class="s_pic" src="images/a3.jpg" alt="">
			        </a>
			        <a href="#" class="s_title">小米活塞耳机简装版</a>
			        <p>好声音源自活塞式音腔，延续经典设计</p>
			    </div>
            </div>
            <div class="s_list">
		        <div class="s_con">
			        <a href="#">
			        <img class="s_pic" src="images/a4.jpg" alt="">
			        </a>
			        <a href="#" class="s_title">小米路由器</a>
			        <p>顶配双频AC智能路由器，内置1TB大硬盘</p>
			    </div>
		    </div>
	    </div>
    </div>
   
    <div class="news">
        <div class="n_title">
	        <h2>新品上架</h2>
		    <a href="#">更多&gt;</a>
	    </div>
	    <div class="n_box">
	        <div class="n_left">

		        <div class="n_first">
                    <img src="images/l1.jpg" alt="" width="548px" height="276px">
                </div>

                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">小米手环</a>
                            <span class="n_price">79元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/l2.jpg" alt="" width="200" height="200"/>
                        </a>
                    </div>
                </div>
     
                <div class="n_item">
                    <div class="n_mini">
                        <div class="m_box">
                            <div class="m_info">
                                <span>五周年米兔钥匙扣</span>
                                <span>9.9元</span>
                            </div>
                            <div class="m_pic">
                                <a href="#"><img src="images/yaoshi.png" alt="" class="yaoshi"></a>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                    </div>
                    <div class="n_mini" style="border-bottom:0;border-right:0;">
                        <div class="m_box">
                            <div class="m_info">
                                <span>QCY派Q8蓝牙耳机</span>
                                <span>59.9元</span>
                            </div>
                            <div class="m_pic">
                                <a href="#"><img src="images/lan.jpg" alt="" width="135" height="135"/></a>
                            </div>
                        </div>
                    </div> 
                </div>

                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">小米T恤路标MILOGO</a>
                            <span class="n_price">39元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/yi.jpg" alt="" class="yi">
                        </a>
                    </div>
                </div>
                 
                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">小米4实木后盖</a>
                            <span class="n_price">69元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/gai.jpg" alt="" class="gai">
                        </a>
                    </div>
                </div>

                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">小米note超薄保护壳</a>
                            <span class="n_price">49元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/baohuke.png" alt="" class="ke">
                        </a>
                    </div>
                </div>

                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">小米自拍杆</a>
                            <span class="n_price">49元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/zipaigan.jpg" alt="" width="200" height="200"/>
                        </a>
                    </div>
                </div>

                <div class="n_item">
                    <div class="n_con">
                        <p class="n_info">
                            <a href="#" class="n_tit">先锋CL31系列耳式耳机</a>
                            <span class="n_price">99元</span>
                        </p>
                        <a href="#" class="n_img">
                            <img src="images/erji.jpg" alt="、" width="200" height="200"/>
                        </a>
                    </div>
                </div>
            </div>
	    
		    <div class="n_right">
		        <div class="r_goods">
			        <ul>
			            <li>
				            <div class="g_text">
					            <span class="t_title">SanDisk 32G存储卡</span>
                                <span class="t_price">79￥<del class="no">109￥</del></span>
					        	<span class="t_desc">还有更多特价商品</span>
					        </div>
					        <div class="g_pic">
					            <img src="images/r1.jpg" alt="">
					        </div>
					        <a href="#"></a>
					        <span class="g_flag">特价商品</span>
				        </li>
				        <li>
				            <div class="g_text">
					            <span class="t_title">特惠配件套餐</span>
						        <span class="t_desc">手机必备配件组合购买</span>
					        	<span class="t_desc">实惠更优惠</span>
					        </div>
					        <div class="g_pic">
					            <img src="images/r2.jpg" alt="">
					        </div>
					        <a href="#"></a>
				        </li>
				        <li>
				            <div class="g_text">
					            <span class="t_title">我爱酷玩</span>
					        	<span class="t_desc">邂逅炫酷的电子产品</span>
					        	<span class="t_desc">结交趣味相同的朋友</span>
					        </div>
					        <div class="g_pic">
					            <img src="images/r3.jpg" alt="">
					        </div>
					        <a href="#"></a>
				        </li>
			        </ul>
			    </div>
			    <div class="r_channel">
			        <ul>
			            <li>
				            <a href="#" class="first">
					            企业用户采购通道
					            <span>&gt;</span>
					        </a>
				        </li>
				        <li>
				            <a href="#">
					        小米手机防伪查询
					        <span>&gt;</span>
					        </a>
				        </li>
				        <li>
				            <a href="#">
					        小米手机官翻版
					        <span>&gt;</span>
					        </a>
				        </li>
				        <li>
				            <a href="#">
					        小米路由器官翻版
					        <span>&gt;</span>
				        	</a>
				        </li>
				        <li>
				            <a href="#">
					        米粉红包
					        <span>&gt;</span>
					        </a>
				        </li>
			        </ul>
                </div>
			    <div class="r_price">
			        <h3>话费充值</h3>
			        <div class="p_form">
			            <input type="text" class="f_tel" placeholder="请输入手机号"/>
				        
                        <select>
                            <option value="100元">100元</option>
                            <option value="100元">200元</option>
                            <option value="100元">50元</option>
                        </select>
                        
				        <p>实付价格94.8元起
				        <a href="#" class="f_btn">立即充值</a>
			        </div>
			    </div>
            </div>
        </div>
    </div>
 
    <div class="footer">
        <div class="f_content">
	        <div class="c_service">
		        <ul>
			        <li>
			            <a href="#">
				            <img src="images/10.png" alt="">
					        <span>1小时快修服务</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/11.png" alt="">
					        <span>7天无理由退货</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/12.png" alt="">
					        <span>15天免费换货</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/13.png" alt="">
					        <span>满150元包邮</span>
				        </a>
			        </li>
			        <li>
			            <a href="#">
				            <img src="images/14.png" alt="">
					        <span>520余家售后网点</span>
				        </a>
			        </li>
			    </ul>
		    </div>
		    <div class="c_links">
		        <dl>
			        <dt>帮助中心</dt>
			        <dd><a href="#">购物指南</a></dd>
			        <dd><a href="#">支付方式</a></dd>
			        <dd><a href="#">配送方式</a></dd>
			    </dl>
			    <dl>
			        <dt>服务支持</dt>
			        <dd><a href="#">售后政策</a></dd>
			        <dd><a href="#">自助服务</a></dd>
			        <dd><a href="#">相关下载</a></dd>
			    </dl>
			    <dl>
			        <dt>小米之家</dt>
			        <dd><a href="#">小米之家</a></dd>
			        <dd><a href="#">服务网点</a></dd>
			        <dd><a href="#">预约亲临到店服务</a></dd>
			    </dl>
			    <dl>
			        <dt>关于小米</dt>
			        <dd><a href="#">了解小米</a></dd>
			        <dd><a href="#">加入小米</a></dd>
			        <dd><a href="#">联系我们</a></dd>
			    </dl>
			    <dl>
			        <dt>关注我们</dt>
			        <dd><a href="#">新浪微博</a></dd>
			        <dd><a href="#">小米部落</a></dd>
			        <dd><a href="#">官方微信</a></dd>
			    </dl>
			    <dl class="kefu">
			        <p class="k_tel">400-100-5678</p>
			        <p class="k_time">周一至周日 8:00-21:00</p>
			        <p class="k_desc">（仅收市话费）</p>
			        <a href="#">24小时在线客服</a>
			    </dl>
		    </div>
		    <div style="width:100%;border-bottom:1px solid #dfdfdf;"></div>
		    <div class="c_bottom">
		        <p class="b_url">小米旗下网站：小米网  |  MIUI  |  米聊  |  多看书城  |  小米路由器  |  繁體香港  |  繁體台灣  |  English  |  小米后院  |  小米天猫店  |  小米淘宝直营店  |  小米网盟</p>
			    <p class="b_url">&copy;mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
			    <p class="b_pic">
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/cnnicVerifyseal.png" alt="" width="54" height="20"/></a>
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/szfwVerifyseal.gif" alt="" width="57" height="20"/></a>
			        <a href="#"><img src="http://s1.mi.com/zt/12052601/save.jpg" alt="" width="46" height="20"/></a>
				</p>
				<select>
					<option>简体中文</option>
					<option>繁体中文</option>
					<option>English</option>
				</select>
		    </div>
	    </div>
    </div>

</body>

</html>